<template>
  <div class="nav-menu">
    <div class="logo">
      <img src="~@/assets/img/logo.png" alt="logo" class="img" />
      <span v-show="!isFold">Vue3+TS</span>
    </div>
    <el-menu
      active-text-color="#06a0bd"
      background-color="#0c2135"
      class="el-menu-vertical-demo"
      :default-active="activePath"
      text-color="#fff"
      :collapse="isFold"
    >
      <el-sub-menu
        :index="subMenu.url"
        v-for="subMenu in menus"
        :key="subMenu.id"
      >
        <template #title>
          <el-icon>
            <component :is="subMenu.icon"></component>
          </el-icon>
          <span>{{ subMenu.name }}</span>
        </template>
        <!-- 二级菜单 -->
        <template v-if="subMenu.children">
          <el-menu-item
            @click="handleMenu(menuItem.url)"
            :index="menuItem.url"
            v-for="menuItem in subMenu.children"
            :key="menuItem.id"
            >{{ menuItem.name }}</el-menu-item
          >
        </template>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { useIcon } from './hock/useIcon';
// vuex -> typescript => pinia
const props = defineProps({
  isFold: Boolean
});
// const props = defineProps<{
//   isFold: boolean;
// }>();
const store = useStore();
const router = useRouter();
const route = useRoute();
const menus = computed(() => {
  // const newMenus = useIcon(store.state.login.menus);
  const newMenus = store.state.login.menus;
  return newMenus;
});
const activePath = computed(() => {
  return route.path;
});
const handleMenu = (path: string) => {
  router.push({
    path: path ?? '/404'
  });
};
</script>

<style scoped lang="less">
.nav-menu {
  height: 100%;
  background-color: #001529;
  .logo {
    height: 28px;
    padding: 12px 10px 8px 20px;
    display: flex;
    align-items: center;
    background-color: #001529;
    overflow: hidden;
    color: #fff;
    .img {
      height: 100%;
      margin-right: 20px;
    }
    .logo-title {
      font-weight: 600;
      font-size: 16px;
    }
  }
  // .menu {
  //   background-color: #e7eaee;
  //   height: calc(100% - 50px);
  //   .marginName {
  //     margin-left: 10px;
  //   }
  // }
}
.el-menu {
  border-right: none;
}
.el-menu-item.is-active {
  background-color: #3370ff !important;
  color: #fff;
  span {
    color: #fff !important;
  }
}
.el-menu--popup {
  padding: 0 0;
}
:deep(.el-sub-menu__title) {
  background-color: #001529 !important;
}
</style>
